<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="color-scheme" content="dark">
  <title>医路伴学 - 专业医学学习助手</title>
  <!-- 引入Vue2 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <style>
    *{
      margin: 0;
      padding: 0;
      background: #EDFFFB;
    }
    .myApp {
      background: #EDFFFB;
      height: 100vh;
      overflow: auto;
      font-family: Arial, sans-serif;
      box-sizing: border-box;
    }
    .innerBox{
      height: 360px;
      width: 343px;
      /* background: #EDFFFB; */
      background-image: url('https://sa.solacemeta.com/download/src/shareBg.png');
      background-size: 100% 100%;
      margin: 100px auto 0; 
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .logoInner{
      height: 44px;
      padding: 24px 0 0 24px;
      box-sizing: content-box;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
    }
    .logoBox{
      height: 44px;
      width: 44px;
      margin-right: 12px;
      background: transparent;
    }
    .titleBox{
      font-size: 22px;
      font-weight: 600;
      color: #333;
      background: transparent;
    }
    .hawkBox{
      height: 140px;
      width: 140px;
      margin: 12px auto;
      background: transparent;
    }
    .des1{
      line-height: 24px;
      font-weight: bold;
      font-size: 20px;
      color: #333333;
      width: 90%;
      text-align: center;
      background: transparent;
    }
    .des2{
      margin: 12px 0;
      font-size: 18px;
      font-weight: 500;
      color: #00CC99;
      background: transparent;
    }
    .des3{
      font-size: 16px;
      font-weight: 500;
      background: transparent;
    }
    .params-info {
      background: transparent;
      padding: 15px;
      border-radius: 8px;
      margin: 15px 0;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .param-item {
      margin: 10px 0;
      padding: 5px 0;
      border-bottom: 1px solid #eee;
    }
    .param-label {
      font-weight: bold;
      color: #333;
    }
    .btn {
      display: inline-block;
      width: 343px;
      height: 44px;
      margin: 36px auto 10px;
      background: #00CC99;
      color: white;
      text-decoration: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .btnLogo{
      height: 24px;
      width: 24px;
      background: transparent;
      margin-right: 10px;
    }
    .btn:hover {
      background: #00CC99;
    }
    .btn2 {
      display: inline-block;
      width: 343px;
      height: 44px;
      margin: 16px auto 10px;
      background: #FF4848;
      color: white;
      text-decoration: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .btn2Logo{
      height: 24px;
      width: 24px;
      background: transparent;
      margin-right: 10px;
    }
    .btn2:hover {
      background: #00CC99;
    }
    .no-params {
      color: #666;
      font-style: italic;
    }
    .maskBox{
      position: fixed;
      height: 100vh;
      width: 100vw;
      background: rgba(0,0,0,0.3);
      backdrop-filter: blur(1px);
    }
    .mskBoxInner{
      position: absolute;
      top: 10px;
      right: 10px;
      height: 44px;
      border: 1px solid #00cc99;
      background: #fff;
      border-radius: 8px;
      padding: 0 10px;
      font-size: 12px;
      color: #333;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mskBoxInner:after{
      content: '';
      height: 10px;
      width: 10px;
      position: absolute;
      right: 16px;
      top: -6px;
      background: #fff;
      border-top: 1px solid #00cc99;
      border-left: 1px solid #00cc99;
      transform: rotate(45deg);
    }
    .mskBoxInnerBg{
      height: 12px;
      width: 12px;
      margin-right: 6px;
      background: #fff;
    }
  </style>
</head>
<body>
  <div id="app" class="myApp" v-if='params'>
    <div class='maskBox' v-if="isWechat && maskVisible" @click='showMask'>
      <div class='mskBoxInner'>
        <img class='mskBoxInnerBg' src='https://sa.solacemeta.com/download/src/chrome.png'>
        使用默认浏览器打开
      </div>
    </div>
    <div class='innerBox'>
      <div class='logoInner'>
        <img class='logoBox' src='https://sa.solacemeta.com/download/src/logo.png'>
        <span class='titleBox'>医路伴学</span>
      </div>
      <img class='hawkBox' src='https://sa.solacemeta.com/download/src/hawk.png'>
      <div class='des1'>{{ JSON.parse(params).videoName }}</div>
      <div class='des1 des2' v-if="JSON.parse(params).url === '/pages/newTemplate/onlyRead/freedom' || JSON.parse(params).url === '/pages/newTemplate/onlyRead/keti'">邀请观看并收藏</div>
      <div class='des1 des3'>
        <span style='background: transparent;' v-if="JSON.parse(params).url === '/pages/newTemplate/onlyRead/freedom' || JSON.parse(params).url === '/pages/newTemplate/onlyRead/keti'">复盘人：</span>
        <span style='background: transparent;' v-else>操作人：</span>
        {{ JSON.parse(params).nickname }}</div>
    </div>
    <div href="javascript:;" class="btn" @click="openLocation">
      <img class='btnLogo' src='https://sa.solacemeta.com/download/src/logo2.png'>
      APP内打开
    </div>
    <div href="javascript:;" class="btn2" @click="openDownload">
      <!-- <img class='btn2Logo' src='https://sa.solacemeta.com/download/src/logo2.png'> -->
      下载App
    </div>
    <!-- <div class="params-info">
      <h3>当前参数信息：</h3>
      <div class="param-item">
        <span class="param-label">baseUrl：</span>
        <span>{{ baseUrl || '未设置' }}</span>
      </div>
      <div class="param-item">
        <span class="param-label">params：</span>
        <span>{{ params || '未设置' }}</span>
      </div>
    </div> -->
    
  </div>
  <div v-else>
    页面没渲染
  </div>

  <script>
    // 创建Vue实例
    new Vue({
      el: '#app',
      data() {
        return {
          baseUrl: '',
          params: null,
          isWechat: false,
          maskVisible: false,
        }
      },
      mounted() {
        // 页面加载完成后解析URL参数
        this.parseQueryParams();
        this.checkWechatBrowser()
      },
      methods: {
        showMask() {
          this.maskVisible = false
        },
        // 检测是否为微信内置浏览器
        checkWechatBrowser() {
          const userAgent = navigator.userAgent.toLowerCase();
          this.isWechat = userAgent.includes('micromessenger');
          if(this.isWechat){
            this.maskVisible = true
          }
        },
        getRouteQuery() {
          const params = {};
          
          // 先 decode 一遍，保证 %3B、%20 等还原成正常字符
          const decodedQuery = decodeURIComponent(window.location.search.slice(1));

          if (!decodedQuery) return params;

          decodedQuery.split('&').forEach(item => {
            let [key, value] = item.split('=');

            if (key) {
              // 统一去掉 HTML 转义残留
              key = key
                .replace(/^amp;/i, '')     // 去掉开头的 amp;
                .replace(/^amp%3B/i, '')   // 去掉开头的 amp%3B
                .replace(/amp;/gi, '')     // 中间位置的 amp;
                .replace(/amp%3B/gi, '');  // 中间位置的 amp%3B

              params[key] = value ? decodeURIComponent(value) : '';
            }
          });

          return params;
        },
        // 解析URL中的查询参数
        parseQueryParams() {
          const query = this.getRouteQuery();
          this.baseUrl = query.baseUrl || '';
          this.params = query.params || null; // 统一变成 params
          // 兼容可能的参数名
        },
        
        // 打开定位页面或下载页面
        openLocation() {
          if(this.isWechat){
            this.maskVisible = true
          }
          if (!this.baseUrl) {
            alert('baseUrl 参数不存在，无法跳转');
            return;
          }
          
          // 构建跳转URL
          const timestamp = new Date().getTime();
          let url = `${this.baseUrl}?timeoutWx=${timestamp}`;
          
          // 拼接params（如果存在）
          if (this.params) {
            url += `&scanInfo=${encodeURIComponent(this.params)}`;
          }
          // 执行跳转
          window.location.href = url;
        },
        openDownload() {
          window.location.href = 'https://sa.solacemeta.com/download/index.html';
        }
      },
      computed: {
        // 模拟Vue Router的query对象
        $routeQuery() {
          const params = {};
          const queryString = window.location.search.slice(1);
          if (!queryString) return params;
          
          queryString.split('&').forEach(item => {
            const [key, value] = item.split('=');
            if (key && value) {
              params[key] = decodeURIComponent(value);
            }
          });
          
          return params;
        }
      }
    });
  </script>
</body>
</html>
